<template>
  <div>
    <form class="form-horizontal">
      <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">图书名称</label>
        <div class="col-sm-10">
          <input v-model="bookForm.bookName" type="text" class="form-control" placeholder="图书名称">
        </div>
      </div>
      <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">图书作者</label>
        <div class="col-sm-10">
          <input v-model="bookForm.author" type="text" class="form-control" placeholder="图书作者">
        </div>
      </div>
      <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">图书类型</label>
        <div class="col-sm-10">
          <select v-model="bookForm.bookType" class="form-control">
            <option value="">请选择</option>
            <option value="食品">食品</option>
            <option value="运动">运动</option>
            <option value="学习">学习</option>
            <option value="金融">金融</option>
          </select>
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <button @click="addBookClick" type="button" class="btn btn-default">确定</button>
        </div>
      </div>
    </form>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
    data(){
      return{
        bookForm: {
          bookName: '',
          author: '',
          bookType: '',
          type: '未借出'
        }
      }
    },
    methods: {
      ...mapActions([
        'addBookItem'
      ]),
      addBookClick(){
        this.addBookItem({obj:this.bookForm,router: this.$router}).then(o => {
            this.$router.push('/home/book/list')
        });
      }
    }
}

</script>